<template>
	<view class="byvip" ref="popup" background-color="#fff"  :style="{'display':showvip?'block':'none'}">
		<view class="envelop">
			<image class="envelopbg" src="../../static/vip.png" mode="heightFix"></image>
			<view class="btn" @click="openvip">
				抢险体验
			</view>
			<!-- 关闭 -->
			<view class="close" @click="change">
				<uni-icons type="closeempty" size="40" color="#fff"></uni-icons>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"vip",
		data() {
			return {
				
			};
		},
		
		props:{
			showvip:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			//关闭提示框
			change(e) {
				this.$emit("changeShow",false);
			},
			//开通vip
			openvip(){
				uni.navigateTo({
					url:"/subpkg/vip_page/vip_page"
				})
			}
		}
	}
</script>

<style lang="scss">
.byvip{
	position: absolute;
	height:100%;
	width: 100%;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.3);
	z-index: 10;
	
	.envelop{
		position:absolute;
		right: 15%;
		top: 15%;
		height: 650rpx;
		width: 580rpx;
		z-index: 110;
		
		.envelopbg{
			width: 100%;
			height: 100%;
			
		}
		.btn{
			background:linear-gradient(to right,#dbb293,#f8dec4);
			width: 60%;
			height:70rpx;
			text-align: center;
			line-height: 70rpx;
			border-radius: 35rpx;
			position: absolute;
			bottom: 70rpx;
			z-index: 130;
			left: 50%;
			margin-left:-25%;
			color: #78482f;
			font-weight: bold;
		}
		.close{
			width: 80rpx;
			height:80rpx;
			position: absolute;
			z-index: 130;
			right:50%;
			margin-right:-70rpx;
			bottom: -100rpx;
			text-align: center;
		}
	}
}


</style>